<template>

  <div>
    <a-button @click="handleTableCheck" type="primary">保存</a-button>
    <span style="padding-left:8px;"></span>
    <a-tooltip placement="top" title="按顺序排序" :autoAdjustOverflow="true">
      <a-button @click="handleTableGet" type="primary">按顺序排序</a-button>
    </a-tooltip>
      <!-- :actionButton="true" 新增按钮 -->
    <j-editable-table
      ref="editableTable"
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      :rowNumber="true"
      :rowSelection="true"
  
      :dragSort="true"
      style="margin-top: 8px;"
      @selectRowChange="handleSelectRowChange">
    
    </j-editable-table>
  </div>

</template>

<script>
  import moment from 'moment'
  import { getAction,postAction } from '@api/manage'
  import { FormTypes } from '@/utils/JEditableTableUtil'
  import { randomUUID, randomNumber } from '@/utils/util'
  import JEditableTable from '@/components/jeecg/JEditableTable'

  export default {
    name: 'DefaultTable',
    components: { JEditableTable },
    data() {
      return {
        loading: false,
        columns: [
           {
            title: 'bm',
            key: 'bookMeterId',
            type: FormTypes.hidden,           
            fixed: 'left', 
          },
          {
            title: '户号',
            key: 'cusCode',           
            width: '150px',
            type: FormTypes.normal,  
          },
          {
            title: '户名',
            key: 'cusName',           
            width: '180px',
            type: FormTypes.normal,  
          },
          {
            title: '地址',
            key: 'address',           
            width: '230px',
            type: FormTypes.normal,  
          },         
          {
            title: '顺序号',
            key: 'orderNo',
            width: '120px',
            type: FormTypes.inputNumber,
            defaultValue: '1',
            placeholder: '请选择${title}',
            validateRules: [{ required: true, message: '请选择${title}' }]
          } 
        ],
        url: {
          getData: '/mr/mrBookMeters/queryBookMaterOrder',
          orderMeter: '/mr/mrBookMeters/bookOrderMater'
        },
        dataSource: [],
        selectedRowIds: []
      }
    },
    mounted() {
      
    },
    methods: {
      /** 表单验证 */
      handleTableCheck() {
        this.$refs.editableTable.getValues((error) => {
          if (error === 0) {
            this.$refs.editableTable.getValues((error, values) => {
              postAction(this.url.orderMeter, values).then(res => {
                if (res.success) {
                  this.$success({title: '抄表顺序', content: res.message}) 
                } else {
                  this.$error({title: '抄表顺序', content: res.message})
                }
              }).finally(() => {
                // 这里是无论成功或失败都会执行的方法，在这里关闭loading
                this.loading = false
              })               
            }, false)
          } else {
            this.$message.error('验证未通过')
          }
        })
      },
      /** 获取值，忽略表单验证 */
      handleTableGet() {      
        this.$refs.editableTable.getValues((error, values) => {
          for(let i=0; i< values.length;i++ ){
            let row=values[i];
            let ao=[{rowKey: row.id, values: {'orderNo': i+1 }}]
            this.$refs.editableTable.setValues(ao)
          }
        }, false)
      },

      handleSelectRowChange(selectedRowIds) {
        this.selectedRowIds = selectedRowIds
      },

      /* 查询加载表格数据 */
      randomPage(bookId, loading = false) {
        if (loading) {
          this.loading = true
        }
       
        // 封装查询条件
        let formData = {         
          id: bookId
        }
        // 调用查询数据接口
        this.loading = true
        getAction(this.url.getData, formData).then(res => {
          if (res.success) {
            // 后台查询回来的 total，数据总数量
            // this.pagination.total = res.result.total
            // 将查询的数据赋值给 dataSource               
            this.dataSource = res.result;           
          } else {
            this.$error({title: '查询失败', content: res.message})
          }
        }).finally(() => {
          // 这里是无论成功或失败都会执行的方法，在这里关闭loading
          this.loading = false
        }) 
      },

      randomData(size, loading = false) {
        if (loading) {
          this.loading = true
        }

        let randomDatetime = () => {
          let time = parseInt(randomNumber(1000, 9999999999999))
          return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
        }

        let begin = Date.now()
        let values = []
        for (let i = 0; i < size; i++) {
          values.push({
            id: randomUUID(),
            dbFieldName: `name_${i + 1}`,
            // dbFieldTxt: randomString(10),
            multipleSelect: ['string', ['int', 'double', 'boolean'][randomNumber(0, 2)]],
            dbFieldType: ['string', 'int', 'double', 'boolean'][randomNumber(0, 3)],
            dbLength: randomNumber(0, 233),
            datetime: randomDatetime(),
            isNull: ['Y', 'N'][randomNumber(0, 1)]
          })
        }

        this.dataSource = values
        let end = Date.now()
        let diff = end - begin

        if (loading && diff < size) {
          setTimeout(() => {
            this.loading = false
          }, size - diff)
        }

      },

      handleDelete(props) {
        let { rowId, target } = props
        target.removeRows(rowId)
      }
    }
  }
</script>

<style scoped>

</style>